<template>
  <div class="like-list">
    <van-nav-bar fixed border title="我的收藏" left-text="返回" @click-left="$router.go(-1)" left-arrow>
      <template #right>
        <van-icon name="search" size="18" @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading"
                      success-text="刷新成功"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="已加载完成">
        <article-item v-for="item in list"
                      :key="item.id"
                      :title="item"
                      :article="item"
                      :number="item.id"></article-item>
      </van-list>
    </van-pull-refresh>
    <div class="container" v-if="!listexist">
      <img src="@/assets/404.png" alt="Alternate Text" />
      <div class="shangfanganniu"><div>很抱歉你还未收藏任何文章，点击去首页逛逛</div><van-icon name="wap-home-o" size="35" color="#1989fa" @click="$router.push('/')" /></div>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/article-item'
import { list } from '@/static/article-list'
export default {
  name: 'LikeList',
  components: {
    ArticleItem
  },
  data () {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      isLoading: false,
      // 列表数据
      result: [],
      // 控制下拉刷新数据
      freshnum: 0,
      listexist: false
    }
  },
  computed: {
    textLike () {
      return this.$store.state.textLike
    }
  },
  created () {
    this.refresh()
  },
  methods: {
    onRefresh () {
      this.refresh()
    },
    refresh () {
      var arr = []
      list.forEach(val => {
        arr.push(...val.result)
      })
      setTimeout(() => {
        this.list = []
        this.textLike.forEach(val => {
          this.list.push(...arr.filter(item => item.textid.toString() === val.textid))
        })
        this.list.forEach(val => { val.photoid = val.textid.toString().slice(0, 1) })
        this.loading = false
        this.isLoading = false
        this.finished = true
        this.listexist = this.list.length > 0
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less">
  .container {
    position:absolute;
    top:400px;
    text-align: center;
    width:100%;
    .shangfanganniu

  {
    div

  {
    font-size: 25px;
    margin-bottom: 20px
  }

  }

  img {
    width: 40%;
  }

  }
  .van-nav-bar {
    border-bottom: 1px solid #808080;
    box-shadow: 1px 1px 3px 3px #e3e3e3
  }
  .van-pull-refresh {
    margin-top:100px;
    height: 1000px;
  }
</style>
